<template>
  <div style="width: 100%">
    <el-form
      ref="form"
      :disabled="disabled"
      :model="formDataAll"
      :rules="rules"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="分组编码" prop="name">
            <el-input v-model="formDataAll.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分组名称" prop="nameCn">
            <el-input v-model="formDataAll.nameCn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否密级" prop="isSecurity">
            <el-select v-model="formDataAll.isSecurity">
              <el-option
                v-for="item in securityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="md-component-btns">
      <el-button size="medium" :disabled="disabled" type="primary" @click="save"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/userGroup/userGroup";

export default {
  name: "userGroupTemp",
  data() {
    return {
      dialogType: "add",
      currentData: {},
      securityList: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      formDataAll: {
        name: "",
        nameCn: "",
        isSecurity: "",
      },
      rules: {
        name: [{ required: true, message: "请输入分组编码", trigger: "blur" }],
        nameCn: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
        ],
        isSecurity: [
          { required: true, message: "请选择是否密级", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    normalizer(node) {
      return {
        id: node.pid,
        label: node.name,
        children: node.children,
      };
    },
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          const paramData = {
            ...this.formDataAll,
          };
          // let form = this.deepCopy(this.formDataAll);
          if (this.dialogType === "add") delete paramData.pid;
          let method =
            this.dialogType === "add" ? "insertGroup" : "updateGroup";
          let msg = this.dialogType === "add" ? "新增" : "编辑";
          api[method](paramData).then(() => {
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          });
        }
      });
    },

    open() {
      this.dialogType = "add";
    },
    edit(row) {
      this.dialogType = "edit";
      this.getDetails(row.pid);
      this.currentData = { ...row };
    },
    view(row) {
      this.dialogType = "view";
      this.getDetails(row.pid);
      this.currentData = { ...row };
    },
    getDetails(pid) {
      api.detail({ id: pid }).then((res) => {
        const newData = res.data.data;
        this.formDataAll = { ...newData };
      });
    },
  },
};
</script>
